<template>
	<view class="">
		<view class="video-details" v-if="!loading">
			<uv-navbar bg-color="none" @leftClick="leftClick">
				<template slot="left">
					<view class="left-icon">
						<uv-icon name="arrow-left" size="20px" color="#FFF"></uv-icon>
					</view>
				</template>
			</uv-navbar>
			<video id="myVideo" class="video" :src="details.videoUrl" :controls="!false" autoplay
				:show-fullscreen-btn="false" :show-play-btn="true" :show-center-play-btn="true"></video>
			<view class="content">{{details.videoContent}}</view>
		</view>
		<view class="button-fb-box">
			<view class="button-fb" @click="onSubmit">发布</view>
		</view>
		<uv-popup ref="popup" bgColor="none">
			<view class="pop-box-1">
				<image class="top-image"
					src="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2024/12/26/5bd2f1da01a14b71b13296587d26825c.png"
					mode="aspectFill"></image>
				<view class="pop-box">
					<view class="title1">是否确认发布 </view>
					<view class="title2">视频/种草内容到{{type}}吗?</view>
					<view class="button" @tap.stop.prevent="submit">确定</view>
				</view>
			</view>
		</uv-popup>
		<uv-loading-page :loading="loading" loading-mode="spinner"></uv-loading-page>
	</view>
</template>

<script>
	import {
		getIsVideoInfo,
		getRedBook
	} from '@/common/api.js'
	import AppOpener from "@/utils/openApp";
	import parame from "@/utils/mobile.js"
	const mobile = parame.parame
	const app = getApp();
	export default {
		data() {
			return {
				type: '',
				loading: false,
				details: {
					video: '',
					content: 1,
				}
			}
		},
		onLoad(e) {
			this.type = e.type
			this.getData(e.id)
		},

		methods: {
			leftClick() {
				app.navigateBack()
			},

			getData(id) {
				this.loading = true
				getIsVideoInfo({
					id
				}).then(res => {
					this.details = res.data
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			previewImage(index) {
				uni.previewImage({
					current: this.list[index],
					showmenu: true,
					urls: this.list
				})
			},
			onSubmit() {
				this.$refs.popup.open();
			},
			async submit() {
				uni.showLoading({
					title: '正在发布',
					mask: true
				});
				switch (this.type) {
					case '抖音':
						const data = {
							"touchDySourceUrl": "snssdk1128://openplatform/share?client_key=awm2snco025d1lg4&nonce_str=3px619ks0k2kogfl&state=1820321205117993&timestamp=1735993584&signature=af9b9da08c7e2744df66728c8c8ed86c&title=%E6%9D%AD%E5%B7%9E%E4%B8%B4%E5%B9%B3%E7%AE%80%E6%B4%BE%E8%8A%B1%E8%89%BA%EF%BC%8C%E9%B2%9C%E8%8A%B1%E7%BB%BF%E6%A4%8D%E7%9A%84%E5%AE%9D%E8%97%8F%E5%9C%B0&share_type=h5&poi_id=7313816504175167525&image_path=https%3A%2F%2Foss.fxzb.vip%2Fvideo%2Fimages%2Fb69075a0d8dcab24899b1f1d2568a400.JPG&video_path=http%3A%2F%2Fv.fxzb.vip%2Ftouch%2Fb38511797751453b81ec472419ec9d9d.mp4&share_to_publish=1&image_list_path=%5B%5D&hashtag_list=%5B%22%E9%B2%9C%E8%8A%B1%22%2C%22%E8%8A%B1%E6%9D%9F%22%2C%22%E5%AE%9A%E5%88%B6%E8%8A%B1%E6%9D%9F%22%2C%22%22%2C%22%E7%AE%80%E6%B4%BE%E8%8A%B1%E8%89%BA%22%5D",
						}
						const ios_store = mobile.ios.douyin
						const android_store = mobile.android.douyin
						// const AppRouter = new openApp({
						// 	scheme: data.touchDySourceUrl,
						// 	ios: ios_store,
						// 	package: android_store,
						// })
						// AppRouter.open(() => {
						// 	uni.hideLoading();
						// }, () => {
						// 	uni.hideLoading();
						// })
						const router = new AppOpener({
							scheme: data.touchDySourceUrl,
							ios: ios_store,
							package: android_store,
						});
						try {
							await router.open();
							uni.hideLoading();
						} catch (error) {
							uni.hideLoading();
							console.log("打开失败:", error);
						}
						break;
					case '快手':
						uni.showModal({
							title: '提示',
							content: '暂未接入',
							showCancel: false
						});
						uni.hideLoading();

						// window.location.href = 'weixin://'
						break;
					case '小红书':
						getRedBook().then((res) => {
							this.xhsShare(res).then(() => {
								uni.hideLoading();
							}).catch((err) => {
								uni.showModal({
									title: '提示',
									content: '发布失败',
									showCancel: false
								});
								uni.hideLoading();
							})
						}).catch(() => {
							uni.hideLoading();
						})

						break;
				}
				this.$refs.popup.close();
				// toast('敬请期待')
			},
			xhsShare(res) {
				return new Promise((resolve, reject) => {
					xhs.share({
						shareInfo: {
							type: 'video', // 必填，笔记类型 'video' | 'normal'
							title: this.details.videoTitle, // 笔记标题
							content: this.details.videoContent, // 笔记正文
							images: [], //图文类型必填，笔记图片，必须是服务器地址，暂时不支持本地文件
							video: this.details.videoUrl, // 视频类型必填，必须是服务器地址
							cover: this.details.videoCoverPhoto, // 视频封面图，必须是服务器地址，暂时不支持本地文件
						},
						verifyConfig: {
							appKey: res.data.appKey, //必填，应用的唯一标识,
							nonce: res.data.nonce, // 必填，服务端生成签名的随机字符串
							timestamp: res.data.timestamp, // 必填，服务端生成签名的时间戳
							signature: res.data.signature, // 必填，服务端生成的签名
						},

						fail: (e) => {
							console.log(e);
							reject(e)
							// 调用失败时执行的回调函数
						},
						success: (res) => {
							resolve()
							console.log(res);
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-details {}

	.button-fb-box {
		position: fixed;
		bottom: 32rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;

		.button-fb {
			width: 480rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

		.button-fb-s {
			width: 326rpx;
			height: 96rpx;
			border: 2rpx solid #4635FF;
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #4635FF;
			line-height: 96rpx;
			text-align: center;
			margin-right: 20rpx;
		}
	}

	.video {
		width: 100vw;
		height: 60vh;
		position: relative;
		z-index: 10;
	}

	.content {
		padding: 40rpx;
		box-sizing: border-box;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 60rpx;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		position: relative;
		top: -32rpx;
		z-index: 11;
		background: #FFFFFF;
	}

	.left-icon {
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding-right: 4rpx;
	}

	.pop-box-1 {
		position: relative;
		padding-top: 150rpx;

		.top-image {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 282rpx;
			height: 284rpx;
		}
	}

	.pop-box {
		width: 614rpx;
		height: 528rpx;
		background: #FFFFFF;
		border-radius: 80rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		padding-top: 160rpx;
		box-sizing: border-box;

		.title1 {
			margin-bottom: 20rpx;
		}

		.title2 {
			margin-bottom: 40rpx;
		}

		.button {
			width: 392rpx;
			height: 80rpx;
			background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
			border-radius: 80rpx 80rpx 80rpx 80rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>